import React, { Component } from 'react';
import Tabbar from '../../hoc/home';
import {Users} from "./style"

class User extends Component {
    state = {
        denglu:false,
        name:""
    }
    login=()=>{
        this.props.history.push("/login")
    }
    remLogin=()=>{
        localStorage.removeItem("token")
        this.setState({
            denglu:false,
            name:""
        })
    }
    componentDidMount(){
        if(localStorage.getItem("token")){
            this.setState({
                denglu:true,
                name:JSON.parse(localStorage.getItem("token")).username
                })
        }
    }
    goLike=()=>{
        if(localStorage.getItem("token")){
            this.props.history.push("/user/like")
        }else{
            if(window.confirm("您还尚未登录，点击确认跳转至登录")){
                this.props.history.push("/login")
            }
        }
    }
    goCollect=()=>{
        if(localStorage.getItem("token")){
            this.props.history.push("/user/collect")
        }else{
            if(window.confirm("您还尚未登录，点击确认跳转至登录")){
                this.props.history.push("/login")
            }
        }
    }
    render() {
        return (
            <Users className="my">
                <div>
                    <div className="top">
                        <div className="box">
                            <img alt="" src="" />
                            <div>{this.state.denglu ? <p>{this.state.name}<span onClick={this.remLogin}>点此退出登录</span></p>: <span onClick={this.login}>立即登录</span>}</div>
                        </div>
                    </div>
                    {/* 收藏喜欢列表 */}
                    <div className="title">
                        <div onClick={this.goLike}>
                            <p className='icon-xiai iconfont' style={{fontSize:"30px",color:"orange"}} ></p>
                            <span>我的点赞</span>
                        </div>
                        <div onClick={this.goCollect}>
                            <p className='icon-shoucang iconfont' style={{fontSize:"30px",color:"orange"}}></p>
                            <span>我的收藏</span>
                        </div>
                    </div>
                    {/* 设置 */}
                    <div className="set">
                        <p>
                            <span className='icon-qianbao iconfont' style={{fontSize:"30px",color:"orange"}} ></span>
                            <i>卖座券</i>
                        </p >
                        <p>
                            <span className='icon-hongbao iconfont' style={{fontSize:"30px",color:"orange"}} ></span>
                            <i>红包</i>
                        </p >
                        <p>
                            <span className='icon-qianbao iconfont' style={{fontSize:"30px",color:"orange"}} ></span>
                            <i>卖座券</i>
                        </p >
                        <p>
                            <span className='icon-shezhi iconfont' style={{fontSize:"30px",color:"orange"}}></span>
                            <i>设置</i>
                        </p >
                    </div>
                </div>
            </Users>
        );
    }
}

export default Tabbar(User);
